<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tips</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#EC4899',
                        accent: '#10B981',
                        dark: '#1F2937',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .popup-shadow {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            }
            .popup-appear {
                animation: popupIn 0.5s ease-out forwards;
            }
            .popup-disappear {
                animation: popupOut 0.5s ease-in forwards;
            }
        }
        
        @keyframes popupIn {
            from {
                opacity: 0;
                transform: scale(0.8) translateY(20px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }
        
        @keyframes popupOut {
            from {
                opacity: 1;
                transform: scale(1);
            }
            to {
                opacity: 0;
                transform: scale(0.8);
            }
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen font-sans">
    <div class="container mx-auto px-4 py-8">
        <header class="text-center mb-12">
    
        </header>
        
        <div class="text-center mb-8">
            <button id="generateBtn" class="bg-primary hover:bg-primary/90 text-white font-bold py-3 px-8 rounded-full shadow-lg transform transition hover:scale-105 focus:outline-none focus:ring-4 focus:ring-primary/50">
                <i class="fa fa-magic mr-2"></i>start
            </button>
            <button id="clearBtn" class="ml-4 bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-8 rounded-full shadow-lg transform transition hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-500/50">
                <i class="fa fa-trash mr-2"></i>puase
            </button>
        </div>
    </div>
 
    <script>
        // 提示词数组
        const prompts = [
            "好好爱自己？",
            "每一次努力都不会白费",
            "保持好奇心，探索未知世界",
            "生活就像一盒巧克力，你永远不知道下一颗是什么",
            "多多陪家里人",
            "学习新东西永远不嫌晚",
            "珍惜当下，活在今天",
            "好好吃饭",
            "保持微笑",
            "每天进步一点点",
            "相信自己，你能做到",
            "感恩生命中遇到的每一个人",
            "保持乐观，一切都会好起来",
            "阅读是心灵的旅行",
            "健康是人生最大的财富",
            "付出总有回报",
            "梦想需要行动去实现",
            "细节决定成败",
            "用善意对待世界",
            "坚持就是胜利",
			  "大吉大利",
            "顺顺利利",
            "每天都要开心",
			 "珍惜每一次见面",
            "早点下班，好好休息",
			  "多喝开水",
            "顺顺利利",
            "每天都要开心"
			
			
        ];
        
        // 弹窗背景颜色数组
        const popupColors = [
            'bg-blue-50 border-blue-200',
            'bg-pink-50 border-pink-200',
            'bg-green-50 border-green-200',
            'bg-yellow-50 border-yellow-200',
            'bg-purple-50 border-purple-200',
            'bg-indigo-50 border-indigo-200',
            'bg-red-50 border-red-200',
            'bg-teal-50 border-teal-200'
        ];
        
        // 生成随机弹窗
        function generatePopup() {
            // 创建弹窗元素
            const popup = document.createElement('div');
            
            // 随机选择提示词
            const randomPrompt = prompts[Math.floor(Math.random() * prompts.length)];
            
            // 随机选择背景颜色
            const randomColor = popupColors[Math.floor(Math.random() * popupColors.length)];
            
            // 设置弹窗样式
            popup.className = `fixed p-5 rounded-lg border popup-shadow popup-appear ${randomColor} max-w-xs`;
            
            // 设置弹窗内容
            popup.innerHTML = `
                <div class="flex justify-between items-start mb-3">
                    <h3 class="font-bold text-gray-800">提示</h3>
                    <button class="close-btn text-gray-500 hover:text-gray-700 transition">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                <p class="text-gray-700">${randomPrompt}</p>
            `;
            
            // 计算随机位置（确保弹窗完全显示在屏幕内）
            const maxLeft = window.innerWidth - 300; // 300是弹窗大致宽度
            const maxTop = window.innerHeight - 200; // 200是弹窗大致高度
            const randomLeft = Math.floor(Math.random() * maxLeft);
            const randomTop = Math.floor(Math.random() * maxTop);
            
            // 设置弹窗位置
            popup.style.left = `${randomLeft}px`;
            popup.style.top = `${randomTop}px`;
            popup.style.zIndex = '1000';
            
            // 添加到页面
            document.body.appendChild(popup);
            
            // 关闭按钮事件
            popup.querySelector('.close-btn').addEventListener('click', () => {
                popup.classList.remove('popup-appear');
                popup.classList.add('popup-disappear');
                setTimeout(() => {
                    popup.remove();
                }, 500);
            });
            
            // 点击弹窗外部关闭（可选）
            popup.addEventListener('click', (e) => {
                if (e.target === popup) {
                    popup.classList.remove('popup-appear');
                    popup.classList.add('popup-disappear');
                    setTimeout(() => {
                        popup.remove();
                    }, 500);
                }
            });
            
            // 设置自动关闭（5-10秒随机）
		const autoCloseTime = 5000 + Math.random() * 5000;
		setTimeout(() => {
			popup.classList.remove('popup-appear');
			popup.classList.add('popup-disappear');
			setTimeout(() => {
				popup.remove();
			}, 500);
		}, autoCloseTime);
        }
        
        // 批量生成多个弹窗
        function generateMultiplePopups() {
            // 随机生成100+个弹窗
            const count = 200 + Math.floor(Math.random()*1 * 100);
            for (let i = 0; i < count; i++) {
                // 每个弹窗间隔一段时间出现，增加动画效果
                setTimeout(generatePopup, i * 300);
            }
        }
        
        // 清除所有弹窗
        function clearAllPopups() {
            const popups = document.querySelectorAll('.popup-shadow');
            popups.forEach(popup => {
                popup.classList.remove('popup-appear');
                popup.classList.add('popup-disappear');
                setTimeout(() => {
                   // popup.remove();
                }, 500);
            });
        }
        
        // 绑定按钮事件
        document.getElementById('generateBtn').addEventListener('click', generateMultiplePopups);
        document.getElementById('clearBtn').addEventListener('click', clearAllPopups);
        
        // 页面加载时自动生成一次弹窗
        window.addEventListener('load', () => {
            setTimeout(generateMultiplePopups, 1000);
        });
    </script>
</body>
</html>